<template>
  <h1>{{ o }}</h1>
  <button @click='setF'>点击</button>
  <hr>
  <h1>{{ obj }}</h1>
  <button @click="setObj">點擊</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
import { reactive, toRef , ref } from "vue";
const o = reactive({
  uname:"张三",
  age:18
})
// 把对象 o 的age属性变成响应式数据;
let age = toRef( o , 'age');
const setF = ()=>{
  age.value++
  console.log(age , age.value);
}
// --------------------------------------
let obj = ref({
  uname:"张三",
  num:0
})
let res= toRef(obj,'num');
const setObj = ()=>{
  // console.log(res.value);//toRef返回的是一個對象;
  res.value.num++
  // console.log(res.value.num);
  console.log(res.value ===  obj.value);
}


// let {AGE} = obj.value;
// const setObj = ()=>{
//   AGE++
//   console.log(AGE);
// }

// 问题：直接从reactive中解构出来的数据 不再是响应式的!!!
// let {age} = o;
// const setF = ()=>{
//   age++
//   console.log(age);
// }
</script>
<script>
// 新创建script标签 用于写入name属性;
  export default {
    name:"App"
  }
</script>
